<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="id">
			id="id"id="id"id="id"
		</div>
		<div class="class">
			class="id"class="id"class="id"
		</div>
		<div class="select">
			class="id"class="id"class="id"
		</div>
		<script type="text/javascript">
			const id = document.getElementById('id')
			const css = document.getElementsByClassName('class')[0]
			const select = document.querySelectorAll('.select')[0]
			id.innerHTML = 'id'
			// id.style.background = 'red'
			id.style.cssText = `
			  font-size: 32px; 
				color: white; 
				background: red
			`
			css.innerHTML = 'css'
			css.style.cssText = `
			  font-size: 32px; 
				background: yellow
			`
			css.style.setProperty('color', 'green')
			select.innerHTML = 'select'
			select.style.cssText = `
			  font-size: 32px; 
				color: white; 
				background: green
			`
			console.log({
				id: id,
				css: css,
				select: select
			})
		</script>
	</body>
</html>